<template>
  <div>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <!-- 文章列表 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onload" :immediate-check="false"
        offset="50">
        <article-item v-for="obj in list" :key="obj.art_id"
        :artObj="obj" @disLikeEV="disLikeFn" @reportEV="reportFn"
        @click.native="itemClickFn(obj.art_id)"
        >
        </article-item>
      </van-list>

    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from '@/components/ArticleItem.vue'
import { getAllArticleListAPI, dislikeArticleAPI, reportArticleAPI } from '@/api'
import { Notify } from 'vant'
// 问题一：网页刚打开，created里请求和onlaod里请求同时发送，都是最新数据
// onload中，两次一样的数据合并，数据重复，key中服了
// 原因： van-list组件，组件挂在时候，默认会判定一次是否触底
// 第一页数据也是网络请求回来的，标签先挂在了，数据回来更新DOM，所以标签没有高度，list的load时间上来就触发
// 解决方法1：把立即检查:immediate-check="false"关上
// 解决方法2：做判断，if(this.list.length===0)return; 如果没有高度，则让onload不往下执行
export default {
  name: 'ArticleList',
  data () {
    return {
      list: [],
      loading: false, // 底部加载的状态
      finished: false, // 是否完成的状态
      theTime: new Date().getTime(),
      isLoading: false // 顶部加载状态
    }
  },
  props: {
    // list: Array
    channelId: Number // 频道ID
  },
  components: {
    ArticleItem
  },
  created () {
    this.getArticleListFn()
  },
  methods: {
    // 专门负责发送请求
    async getArticleListFn () {
      const res = await getAllArticleListAPI({
        channel_id: this.channelId, // 先默认请求频道推荐
        timestamp: this.theTime
      })
      // console.log(res)
      this.list = [...this.list, ...res.data.data.results] // 数组合并
      this.theTime = res.data.data.pre_timestamp

      // 向下加载更多或者向上上拉刷新虽然没同时使用下面的判断，但是不影响设置
      if (res.data.data.pre_timestamp === null) {
        this.finished = true
      }
      // 顶部加载状态改为false
      this.isLoading = false
    },
    // 底部加载事件方法
    onload () {
      this.getArticleListFn()
    },
    onRefresh () {
      this.list = []
      this.theTime = new Date().getTime()
      this.getArticleListFn()
    },
    // 反馈不感兴趣
    async disLikeFn (id) {
      // try {
      await dislikeArticleAPI({
        artId: id
      })
      // res里没有什么有用的信息，所以await往下放行，反馈成功
      // console.log(res)
      Notify({ type: 'success', message: '反馈成功' })
      // } catch (error) {
      //   console.log('失败了')
      // }
    },
    // 反馈垃圾内容
    async reportFn (id, value) {
      await reportArticleAPI({
        artId: id,
        type: value
      })
      Notify({ type: 'success', message: '举报成功' })
    },
    // 文章单元格的点击事件
    itemClickFn (id) {
      this.$router.push({
        path: `/detail?art_id=${id}`
      })
    }
  }
}
</script>
